<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>药品信息</title>
		<link rel="stylesheet" href="css/index.css">
		<script src="js/vue.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mycommon.js"></script>
	</head>
	<body>
		<div id="box1">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item><a href="index.html" target="_top">首页</a></el-breadcrumb-item>
				<el-breadcrumb-item>药品信息</el-breadcrumb-item>
			</el-breadcrumb>
			<br />
			<fieldset style="border: 1px solid gainsboro;margin-bottom: 4px;">
				<legend><i class="el-icon-search" style="color:#bfb6a3 ;">查询</i></legend>
				<el-form size="mini" :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="标题">
						<el-input v-model="formInline.user" placeholder="标题"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="onSubmitselect">查询</el-button>
						<el-button type="warning" @click="open">新增药品</el-button>
					</el-form-item>
				</el-form>
			</fieldset>
			<template>
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="id" label="药品编号">
					</el-table-column>
					<el-table-column prop="yaopinmingcheng" label="药品名称">
					</el-table-column>
					<el-table-column prop="yaopinfenlei" label="药品分类">
					</el-table-column>
					<el-table-column label="药品图片">
						<template slot-scope="scope">
							<img :src="scope.row.yaopinzhaopian" style="width: 100px;height: 100px;" />
						</template>
					</el-table-column>
					<el-table-column prop="pinpai" label="品牌">
					</el-table-column>
					<el-table-column prop="onelimittimes" label="单限" width="50px">
					</el-table-column>
					<el-table-column prop="alllimittimes" label="库存" width="50px">
					</el-table-column>
					<el-table-column prop="price" label="价格" width="50px">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button type="primary" size="mini"
								@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="mini" type="danger"
								@click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
						</template>
				</el-table>
			</template>
			<el-pagination background layout="prev, pager, next" :total="tocal" :page-size="pagesize"
				@current-change="handleCurrentChange">
			</el-pagination>
			<!-- 修改 -->
			<el-dialog title="修改药品" :visible.sync="dialogVisibleup" width="50%">
				<el-form ref="form" :model="tableData" label-width="80px">
					<el-form-item label="药品编号">
						<el-input v-model="tableData.id" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="药品名称">
						<el-input v-model="tableData.yaopinmingcheng"></el-input>
					</el-form-item>
					<el-form-item label="头像">
						<template slot-scope="scope">
							<img :src="tableData.yaopinzhaopian" style="width: 100px;height: 100px;" />
							<el-upload class="upload-demo" :action=HTTP+"uploadfile" :on-preview="handlePreview"
								multiple :limit="3" :on-success="fileuploadsuccess" :on-exceed="handleExceed">
								<el-button size="small" type="primary">选择上传图片</el-button>
							</el-upload>
						</template>
					</el-form-item>
					<el-form-item label="药品数量">
						<el-input v-model="tableData.onelimittimes"></el-input>
					</el-form-item>
					<el-form-item label="药品价格">
						<el-input v-model="tableData.price"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="dialogVisibleup = false">取 消</el-button>
					<el-button size="mini" type="primary" @click="onSubmitup">修 改</el-button>
				</span>
			</el-dialog>
			<!-- 新增 -->
			<el-dialog title="新增药品" :visible.sync="dialogVisibleadd" width="50%">
				<el-form ref="form" :model="sizeform" label-width="80px">
					<el-form-item label="药品编号">
						<el-input v-model="sizeform.id" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="药品名称">
						<el-input v-model="sizeform.yaopinmingcheng"></el-input>
					</el-form-item>
					<el-form-item label="药品分类">
						<el-input v-model="sizeform.yaopinfenlei"></el-input>
					</el-form-item>
					<el-form-item label="药品品牌">
						<el-input v-model="sizeform.pinpai"></el-input>
					</el-form-item>
					<el-form-item label="药品图片">
						<template slot-scope="scope">
							<img :src="sizeform.yaopinzhaopian" style="width: 100px;height: 100px;" />
							<el-upload class="upload-demo" :action=HTTP+"uploadfile2" :on-preview="handlePreview"
								multiple :limit="3" :on-success="fileuploadsuccess" :on-exceed="handleExceed">
								<el-button size="small" type="primary">选择上传图片</el-button>
							</el-upload>
						</template>
					</el-form-item>
					<el-form-item label="药品数量">
						<el-input v-model="sizeform.onelimittimes"></el-input>
					</el-form-item>
					<el-form-item label="药品价格">
						<el-input v-model="sizeform.price"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="dialogVisibleadd = false">取 消</el-button>
					<el-button size="mini" type="primary" @click="onSubmitadd">修 改</el-button>
				</span>
			</el-dialog>
		</div>

		<script>
			new Vue({
				el: "#box1",
				data: {
					tableData: [{
						id: '',
						yaopinmingcheng: '',
						yaopinfenlei: '',
						yaopinzhaopian: '',
						pinpai: '',
						onelimittimes: '',
						alllimittimes: '',
						price: '1'
					}],
					sizeform: {
						id: '',
						yaopinmingcheng: '',
						yaopinfenlei: '',
						yaopinzhaopian: '',
						pinpai: '',
						onelimittimes: '',
						price: '1'
					},
					formInline: {
						user: ''
					},
					id: 0,
					page: 1, //当前第几页
					tocal: 0, //总条数
					pagesize: 5, //每页条数		
					dialogVisibleup: false,
					dialogVisibleadd: false,
					fileList: [{
						name: 'food2.jpeg',
						url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
					}],
					pagesize: 1, //每页条数		
					dialogVisibleup: false,
				},
				methods: {
					initdata() {
						var that = this
						//ajax请求后端接口获取json数据
						axios.get(HTTP + "selectAll/" + this.page).then(function(res) {
							// alert(JSON.stringify(res));
							that.tableData = res.data.data.pageInfo.list
							that.tocal = res.data.data.pageInfo.total
							that.pagesize = res.data.data.pageInfo.pageSize
						}).catch(err => {
							console.log(err)
						});
					},
					onSubmitadd() {
						this.dialogVisibleadd = false
						var that = this
						alert(123)
						axios.post(HTTP + "Insert", this.sizeform).then(function(res) {
							alert(123)
							if (res.data.code == 200) {
								that.$message("添加成功");
								that.initdata();
							} else {
								that.$message("添加失败");
								that.initdata();
							}
						}).catch(err => {
							console.log(err)
						});
					},
					handleDelete(index, row) {
						this.id = row;
						this.del();
						this.initdata();
					},
					handleEdit(index, row) {
						//编辑
						this.dialogVisibleup = true
						//1、根据id调用后端接口获取数据
						var that = this
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "selectbyid/", {
							"id": row.id
						}).then(function(res) {
							//alert(JSON.stringify(res.data.data.yaopinxinxi1))
							//2、把后端获取的这个对象填充到表单里面进行修改
							that.tableData = res.data.data.yaopinxinxi1
						}).catch(err => {
							console.log(err)
						});
					},
					del() {
						var that = this;
						//ajax请求后端接口获取json数据
						axios.get(HTTP + "del/" + this.id).then(function(res) {
							if (res.data.code == 200) {
								that.$message("删除成功");
								that.initdata();
							}
						}).catch(err => {
							console.log(err)
						});
					},
					onSubmitselect() {

					},
					open() {
						this.dialogVisibleadd = true
					},
					handleCurrentChange(val) { //分页
						this.page = val //舍子当前页
						this.initdata() //发送ajax请求重新获取数据
					},
					onSubmitup() {
						this.dialogVisibleup = false
						var that = this
						axios.post(HTTP + "Update", this.tableData).then(function(res) {
							if (res.data.code == 200) {
								that.$message("修改成功");
								that.initdata();
							} else {
								that.$message("修改失败");
								that.initdata();
							}
						}).catch(err => {
							console.log(err)
						});
					},
					handlePreview(file) {
						console.log(file);
					},
					handleExceed(files, fileList) {
						this.$message.warning(
							`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
					},
					fileuploadsuccess(res) {
						this.tableData.yaopinzhaopian = "img/" + res.data.fname
					}
				},
				mounted() {
					this.initdata();
				}
			})
		</script>
	</body>
</html>